<div style="min-height:calc(100vh -  157px)">
  <form nz-form style="background: #fff;padding: 20px;">
    <div nz-row>
      <div nz-col nzSpan="3">
        <nz-select
          style="width: 165px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="员工状态"
        >
          <nz-option nzLabel="在职" nzValue="在职"></nz-option>
          <nz-option nzLabel="离职" nzValue="离职"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="3">
        <nz-select
          style="width: 165px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="员工类型"
        >
          <nz-option nzLabel="兼职" nzValue="兼职"></nz-option>
          <nz-option nzLabel="实习" nzValue="实习"></nz-option>
          <nz-option nzLabel="试用" nzValue="试用"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="3">
        <nz-select
          style="width: 165px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="性别"
        >
          <nz-option nzLabel="男" nzValue="男"></nz-option>
          <nz-option nzLabel="女" nzValue="女"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="3">
        <nz-select
          style="width: 165px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="部门"
        >
          <nz-option nzLabel="部门一" nzValue="部门一"></nz-option>
          <nz-option nzLabel="部门二" nzValue="部门二"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="3">
        <nz-select
          style="width: 165px;"
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="角色"
        >
          <nz-option nzLabel="测试" nzValue="测试"></nz-option>
          <nz-option nzLabel="管理员" nzValue="管理员"></nz-option>
        </nz-select>
      </div>
      <div nz-col nzSpan="3">
        <nz-input-group style="width: 165px;" [nzSuffix]="suffixIconSearch">
          <input type="text" nz-input placeholder="搜索工号/姓名/手机号" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
          <i nz-icon type="search"></i>
        </ng-template>
      </div>
      <button nz-button nzType="primary" (click)="goStaffAdd()" style="float: right">新增</button>
    </div>
  </form>

  <!-- 表格列表 -->
  <div style="margin-top:20px;"></div>
  <div
    nz-row
    style="background-color: #fff;margin-top: 20px;padding:20px;"
  >
    <nz-table [nzData]="dataSet">
      <thead>
      <tr>
        <th style="text-align:center">工号</th>
        <th style="text-align:center">姓名</th>
        <th style="text-align:center">性别</th>
        <th style="text-align:center">部门</th>
        <th style="text-align:center">手机号</th>
        <th style="text-align:center">员工类型</th>
        <th style="text-align:center">所属角色</th>
        <th style="text-align:center">操作</th>

      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let info of dataSet">
        <td style="text-align:center">{{info.staffNo}}</td>
        <td style="text-align:center">{{info.name}}</td>
        <td style="text-align:center">{{info.sexName}}</td>
        <td style="text-align:center">{{info.departmentNames}}</td>
        <td style="text-align:center">{{info.phone}}</td>
        <td style="text-align:center">{{info.staffTypeName}}</td>
        <td style="text-align:center">{{info.roleNames}}</td>
        <td style="text-align:center">
          <a [routerLink]="['/staff/staffs-edit',info.id]">修改</a>
          <nz-divider [nzType]="'vertical'"></nz-divider>
          <a style="margin-left: 10px;" (click)="showModalMiddle()">删除</a>

          <nz-modal nzWrapClassName="vertical-center-modal"
                    [(nzVisible)]="isVisibleMiddle"
                    [nzFooter]="modalFooter"
                    [nzTitle]="modalTitle"
                    (nzOnCancel)="handleCancelMiddle()">
            <p style="text-align: center;font-size: 20px;">确认要删除当前用户数据吗？</p>
          </nz-modal>
          <ng-template #modalTitle>
            <h2>确认删除</h2>
          </ng-template>
          <ng-template #modalFooter>
            <button nz-button nzType="primary" (click)="handleOkMiddle(info.id)" [nzLoading]="isConfirmLoading">确认</button>
            <button nz-button nzType="default" (click)="handleCancelMiddle()">取消</button>
          </ng-template>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</div>
